Полезные плагины для браузера Google Chrome 2017
Google Chrome является наиболее популярным браузером последних лет. Простота, приятный минималистический интерфейс и быстрота работы обеспечили ему поддержку миллионов пользователей по всему миру.
Однако ни для кого не секрет, что его стандартные возможности не всегда могут угодить нашим потребностям. Именно в такие моменты на помощь приходит интернет-магазин Хрома с сотнями плагинов, среди которых каждый сможет найти что-то полезное и для себя.
Плагины — это специальные расширения для браузера Google Chrome, созданные для увеличения его функционала или улучшения уже имеющегося. Они создаются независимыми разработчиками и выкладываются в специальный «магазин» Гугла. Его контент постоянно растет и обновляется. Все плагины вы можете скачать и установить абсолютно бесплатно,
Плагинов для Google Chrome существует очень много, и все мы их рассматривать не будем, потому что функционал некоторых из них весьма спорный. Мы отобрали почти два десятка, на наш взгляд, наиболее полезных и актуальных плагинов для веб-разработчика, которые способны существенно увеличить скорость разработки проектов и облегчить вашу работу.


Урок 1. Плагин для Google Chrome Font Playground:
От автора: иногда приходится верстать страницу сразу в html без исходного макета Photoshop. То есть, создавать дизайн сразу в html минуя его прорисовку в Photoshop. При этом один из самых сложных моментов, с которым в такой ситуации сталкиваются веб-мастера – это подбор шрифтов. Неудобно и занимает много времени изменение шрифтов в коде, и последующий просмотр сочетания шрифтов в браузере.
Font Playground отличное расширение для работы со шрифтами и типографикой, которое станет незаменимым помощником веб-дизайнера. Благодаря Font Playground вы сможете изменять стиль, размер и эффекты шрифта на активных страницах, не внося при этом абсолютно никаких изменений в код. Расширение позволяет свободно экспериментировать со шрифтами, смотреть, как они взаимодействует друг с другом, и только после этого уже менять код страницы.
В данном уроке мы рассмотрим с вами работу с плагином Font Playground для Google Chrome. И научимся быстро экспериментировать и подбирать шрифты.


Урок 2. Плагин для Google Chrome What Font:
От автора: в данном уроке мы рассмотрим с вами еще один плагин для Google Chrome, который упростит нам работу со шрифтами и их подбором и поиском – What Font.
Учитывая тысячи сайтов, которые мы просматриваем ежедневно, всегда найдется что-то, что привлечет внимание дизайнера – виджет, динамичная функция или восхитительный шрифт, который вы хотели бы использовать в своем очередном проекте, но понятия не имеете, как он называется. В данном случае, конечно, может помочь инструмент для веб-разработчика для chrome. Но это может быть не очень удобно, особенно если шрифт наследуется от родительского элемента или переопределяется.
Это та ситуация, когда расширение WhatFont придет на помощь. С ним вы сможете изучить все шрифты на странице и быстро определить их названия, чтобы приступить к их поиску. Кроме того, расширение предоставляет возможность определить относится ли шрифт к категории бесплатных или премиум-шрифтов, а также находится ли он в базе Google Fonts или Typekit.


Урок 3. Плагин для Google Chrome YSlow:
От автора: сегодняшние полезные расширения для веб-разработчиков для браузера Хром представлены парочкой анализаторов скорости загрузки страницы с рекомендациями по повышению эффективности.
От того, насколько быстро загружается ваша страница, зависит, сумеете ли вы удержать пользователей. Согласитесь, мало, кому хочется сидеть и ждать, пока он сможет полностью увидеть контент, который ему нужен. Чтобы подобного не случилось с вашим сайтом, используйте расширение Yslow для Google Chrome, позволяющее проверить, как быстро загружается ваша страница, а также определить, какие элементы замедляют загрузку, если таковые существуют и даст подсказки и рекомендации, что и как нужно улучшить.


Урок 4. Плагин для Google Chrome Web Developer:
От автора: часто при финальном тестировании страницы и совсем детальной ее доработкой нужно посмотреть, например, как страница выглядит при отключенных стилях или при отключенных картинках. Часто бывает нужно посмотреть, а как страница выглядит при отключенном JavaScript, особенно это актуально для мобильных версий сайтов.
Расширение Web Developer для браузера Google Chrome добавляет кнопку на панель инструментов с различными инструментами для веб-разработчика. Это безусловно и одно из самых популярных расширений для Chrome. Web Developer добавляет широкий спектр супер полезных инструментов для браузера, каждый веб-дизайнер и разработчик должен использовать его.


Урок 5. Плагин для Google Chrome Web Developer checklist:
От автора: работа веб-мастера заключается не только в создании красивого дизайна, но и в том, чтобы сделать сайт, который будет идеально функционировать и отвечать всем необходимым параметрам. Сайт должен быть без ошибок, сайт должен быстро загружаться, сайт должен быть оптимизирован под поисковые системы, сайт должен быть удобен для использования и т.д.
С расширением Web Developer checklist для Google Chrome вы сможете легко и быстро проверить ваши страницы на соответствие SEO, скорость загрузки, видимость и юзабилити. Если в процессе работы вы, к примеру, забыли проставить мета-заголовок, то расширение тут же уведомит вас о данной проблеме.
Плагин быстро проверит вашу страницу на соответствие нужным параметрам и сообщит, что еще нужно исправить на странице.


Урок 6. Плагин для Google Chrome PerfectPixel:
От автора: многие заказчики, когда заказывают верстку или сайт, указывают в техническом задании, что верстка должна быть PixelPerfect. Это означает, что верстка должна в точности, до малейших деталей, соответствовать тому, что изначально нарисовано на макете дизайна сайта в Photoshop.
В этом случае расширение PerfectPixel для Google Chrome вам просто необходимо. Благодаря ему вы сможете создавать веб-сайты, которые будут в точности соответствовать тому, что нарисовано в дизайне. Плагин работает следующим образом: вы, помощью простых действий размещаете поверх вашей страницы полупрозрачное изображение исходного дизайна, чтобы проверить, если они совпадают вплоть до каждого пикселя. И по ходу разработки проверяете верстку на соответствие макету.
В данном уроке мы рассмотрим работу и настройку данного плагина.


Урок 7. Плагин для Google Chrome IE Tab:
От автора: как вы знаете, верстку нужно проверять в различных браузерах. А лучше это делать не в последний момент на готовой верстке, а периодически в процессе верстки. И лучше тестировать не только в разных браузерах, а в разных версиях одного и того же браузера. Если тестирование в различных версиях браузеров, для таких браузеров как Chrome, Opera, Yandex не актуально, то просмотреть, как сайт выглядит в различных версиях IE достаточно важно.
Плагин для Google Chrome IE Tab позволяет быстро проверять вид вашего сайта в различных версиях IE. В плагине достаточно просто указать версию, в которой хотите протестировать сайт и проверить. В уроке мы с вами рассмотрим установку, настройки и работу плагина.


Урок 8. Плагин для Chrome Page Ruler:
От автора: иногда на сайте нужно определить размеры элементов, положение элементов. И если определить просто размеры достаточно просто используя инструменты разработчика для браузера хром, то определить расстояние между блоками или на каком расстоянии от края страницы расположен элемент достаточно сложно. Для этого нужно использовать вычисления, а в некоторых случаях это определить практически невозможно.
В данном уроке мы с вами рассмотрим работы плагина Page Ruler для браузера Chrome. Этот простой, но полезный инструмент позволит вам добавить линейку на любую страницу, что поможет вам определить ширину, высоту и положение элемента.


Урок 9. Плагин для Chrome Check My Links:
От автора: на этапе тестирования, перед запуском сайта, необходимо проверять на работоспособность все элементы сайта. Проверять нужно работу всех скриптов, галерей, слайдеров, табов, используемых на странице. И еще одним важным элементом любой веб-страницы являются ссылки. Кликая по ссылкам мы переходим на новые страницы. Кнопки «купить» или «заказать» в интернет-магазинах или лендингах тоже являются ссылками. И все ссылки и кнопки перед запуском нужно проверять.
Все достаточно просто, когда у нас на весь лендинг всего одна кнопка «заказать». В таком случае можно протестировать вручную. Но если на лендинге много ссылок, которые находятся на всей странице по тексту, то в таком случае лучше воспользоваться средствами автоматической проверки ссылок. Плагин для Chrome Check My Links поможет вам справится с автоматической проверкой ссылок. В уроке мы рассмотрим настройку плагина для различных проверок ссылок.


Урок 10. Плагин для Chrome Code Cola:
От автора: Code Cola – это плагин для Google Chrome, который предлагает широкие возможности визуального редактирования стилей CSS. Вы просто выделяете нужный элемент и с помощью плагина Code Cola на ходу меняете его стили. При помощи данного расширения можно редактировать основные стили CSS3 прямо на сайте.
Вы легко сможете менять тени, окружности бокса и т.д. Все это делается элементарно, путем перетаскивания ползунка. Причем, вы сразу же будете видеть эффект. После того как вы проделаете все эти манипуляции, то код, который получится в результате этого, можно скопировать и заменить в самом файле style.css.
На первый взгляд может показаться, что плагин не нужен, потому что стили можно редактировать на странице прямо в панели для веб-разработчика. Но в плагине Code Cola это делать удобнее. Код не прописываешь руками, а назначаешь, используя кнопки и когда добились нужного результата, код легко скопировать в файл css. В данном уроке мы рассмотрим работу с этим интересным плагином.


Урок 11. Плагин для Chrome Clear Cache:
От автора: достаточно часто задают вопрос начинающие разработчики о том, что не сразу видят изменения, внесенные в код. Дело тут в том, что быстрота работы браузера Chrome достигается, в том числе и за счет кеширования страниц. То есть если вы взяли, например, файл стилей на сервере, внесли в него некоторые правки, закачали обратно на сервер, то, скорее всего, вы изменений на сайте сразу не увидите. Происходит так потому, что файл стилей находится у вас в кеше браузера и берется именно оттуда, а не с сервера.
В данном уроке мы с вами установим и настроим плагин, который позволяет быстро отчищать кеш браузера. Стоит отметить, что в зависимости от настроек плагина, можно очищать и историю, и куки и т.д.


Урок 12. Плагин для Chrome Instant Wireframe:
От автора: Instant Wireframe — расширение, при помощи которого можно «превратить» любую страницу в структурную схему компоновки материала — wireframe. Позволяет разработчикам и веб-дизайнерам не выходя из браузера ознакомиться с компоновкой любой страницы в сети. В этом уроке мы рассмотрим, как работает данный плагин.
Просматривая сайты в интернете, не редко может попасться сайт с очень интересной, нестандартной структурой. С нестандартным расположением и компоновкой блоков на странице. И, как разработчику, всегда интересно посмотреть, как удалось добиться такого результата, как все расположено на сайте. Смотреть на блоки, выделяя их с помощью инструментов разработчика для хром долго и неудобно.


Урок 13. Плагин для Chrome Chrome Sniffer:
От автора: плагин Chrome Sniffer — позволяет узнать, какие Frameworks, CMS и JavaScript библиотеки используются на сайте. Использовать его очень просто — при загрузке сайта, в адресной строке появляется иконка того или иного приложения.
В предыдущем уроке мы с вами поставили плагин, который может показать нам, как раелизована схема на понравившемся нам сайте. Но понимание самой схемы расположения блоков нам не показывает, как все на сайте или на странице реализовано. Не дает ответ на вопрос, за счет чего реализован нестандартный функционал.


Урок 14. Плагин для Chrome Resolution Test:
От автора: все больше пользователей предпочитают выходить в Интернет через свои мобильные устройства, что означает, при создании очередного сайта, веб-дизайнер должен уделить особое внимание тому, как он будет выглядеть на этих самых устройствах. А если учитывать, что с каждым годом появляется все больше разных моделей, дизайнерам становится труднее соответствовать им. Однако расширение Resolution Test поможет вам справиться с этой задачей значительно быстрее.
Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера. Это означает, что не изменяя реального разрешения вашего монитора, Вы можете увидеть как будет отображаться сайт под другим разрешением. В перечне доступных присутствуют практически все потенциально возможные разрешения, а в том случае, если требуется какое-либо нестандартное — его можно ввести в поле «Custom».


Урок 15. Плагин для Chrome SEOquake:
От автора: SeoQuake – лучший плагин для оптимизатора в Google Chrome. Здесь можно увидеть все параметры сайта, обратные ссылки, индексацию, whois, nofollow ссылки. Плагин встраивается в страницу поисковой выдачи, так что видны все показатели сайта, даже не заходя на него. В настройках можно выбрать тот перечень показателей, которые вам нужно видеть на сайте.
Плагин может быть полезен как для оценки своего проекта, своего сайта, так и для анализа сайтов конкурентов. В уроке мы с вами рассмотрим работу плагина SeoQuake. Рассмотрим основные его показатели, параметры и настройки.